<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

      <el-form-item label="订单状态" prop="orderState">
        <el-select v-model="queryParams.orderState" placeholder="请选择订单状态" clearable size="small">
          <el-option
            v-for="dict in orderStateOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="订单号" prop="orderNum">
        <el-input
          v-model="queryParams.orderNum"
          placeholder="请输入订单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="车牌号" prop="carNum">
        <el-input
          v-model="queryParams.carNum"
          placeholder="请输入车牌号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="优惠券" prop="useCoupon">
        <el-select v-model="queryParams.useCoupon" placeholder="请选择是否使用了优惠券" clearable size="small">
          <el-option
            v-for="dict in useCouponOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型" prop="orderType">
        <el-select v-model="queryParams.orderType" placeholder="请选择订单类型 " clearable size="small">
          <el-option
            v-for="dict in orderTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="检测结果" prop="checkResult">
        <el-select v-model="queryParams.checkResult" placeholder="请选择检测结果" clearable size="small">
          <el-option
            v-for="dict in checkResultOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="支付状态" prop="isPay">
        <el-select v-model="queryParams.isPay" placeholder="请选择是否已支付" clearable size="small">
          <el-option
            v-for="dict in isPayOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付通道" prop="payChannel">
        <el-select v-model="queryParams.payChannel" placeholder="请选择支付通道" clearable size="small">
          <el-option
            v-for="dict in payChannelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          :unlink-panels="unlinkPanels"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="完成时间">
        <el-date-picker
          v-model="finishDateRange"
          :unlink-panels="unlinkPanels"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['order:order:export']"
        >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="orderList">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-card class="box-card">
            <div class="text item">
              <el-row :gutter="24" class="expand-item">
                <el-col :span="6">订单金额：{{props.row.orderPrice}} /元</el-col>
                <el-col :span="6">代驾费：{{props.row.driverFee}} /元</el-col>
                <el-col :span="6">检测费：{{props.row.stationFee}} /元</el-col>
                <el-col :span="6">代金券：{{props.row.couponFee}} /元</el-col>
              </el-row>
              <el-row :gutter="24" class="expand-item">
                <el-col :span="6">订单金额：{{props.row.orderPrice}} /元</el-col>

                <el-col :span="6">支付通道：{{payChannelFormat(props.row.payChannel)}}</el-col>
              </el-row>
            </div>
          </el-card>
        </template>
      </el-table-column>
      <el-table-column label="订单号" align="center" prop="orderNum"/>
      <el-table-column label="车牌号" align="center" prop="carNum"/>
      <el-table-column label="实际支付" align="center" prop="actPrice"/>
      <el-table-column label="订单状态" align="center" prop="orderState" :formatter="orderStateFormat"/>
      <el-table-column label="订单类型" align="center" prop="orderType" :formatter="orderTypeFormat"/>
      <el-table-column label="检测结果" align="center" prop="checkResult" :formatter="checkResultFormat"/>
      <el-table-column label="订单备注" align="center" prop="remark"/>
      <el-table-column label="预约时间" align="center" prop="bookTime" width="180"/>
      <el-table-column label="创建时间" align="center" prop="gmtTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.gmtTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间" align="center" prop="finishTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.finishTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown"  >
              <el-dropdown-item v-hasPermi="['order:order:zpDriver']">
                <el-button
                  type="info"
                  size="mini"
                  @click="handleChooseDriver(scope.row.id)"
                  v-if="scope.row.orderType === 2"
                >指派驾驶员
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['order:order:zpStation']">
                <el-button
                  type="info"
                  size="mini"
                  @click="handleChooseStation(scope.row.id)"
                  v-if="scope.row.orderType === 3 && scope.row.orderState < 21"
                >指派检测站
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item   v-hasPermi="['order:timeline:list']">
                <el-button
                  type="info"
                  size="mini"
                  @click="handleTimeline(scope.row.id)"
                >时  间  轴
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['order:order:detail']">
                <el-button
                  type="info"
                  size="mini"
                  @click="handleUpdate(scope.row)"
                >订单详情
                </el-button>
              </el-dropdown-item>

              <el-dropdown-item v-hasPermi="['order:order:finish']">
                <el-button
                  type="warning"
                  size="mini"
                  @click="handleMannelFinish(scope.row.id)"
                  v-if="canSubmitFinish(scope.row)"
                >完成订单
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item  v-hasPermi="['order:refund:create']">
                <el-button
                  type="warning"
                  size="mini"
                  @click="handleBfRefund(scope.row)"
                  v-if="canSubmitTuikuan(scope.row)"
                >订单退款
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['order:order:mjsl']">
                <el-button
                  type="warning"
                  size="mini"
                  @click="handleMjsl(scope.row.id)"
                  v-if="scope.row.orderType === 1 && scope.row.orderState === 1"
                >免检受理
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item  v-hasPermi="['order:order:mjsl']">
                <el-button
                  type="warning"
                  size="mini"
                  @click="handleMjwj(scope.row.id)"
                  v-if="scope.row.orderType === 1 && scope.row.orderState === 3"
                >免检完结
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['order:img:orderImg']">
                <el-button
                  type="warning"
                  size="mini"
                  @click="handleImgUpload(scope.row.id)"
                  v-if="scope.row.orderType === 3"
                >签章上传
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['order:order:profit']">
                <el-button
                  type="warning"
                  size="mini"
                  @click="handleProfit(scope.row)"
                  v-if="scope.row.orderType != 1"
                >订单获利
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="open" v-if="open" width="75%"  append-to-body>
      <order-detail :orderId="orderId"></order-detail>
    </el-dialog>

    <!-- 订单获利对话框 -->
    <el-dialog title="订单获利情况" :visible.sync="profitopen" v-if="profitopen" width="55%"  append-to-body>
      <order-profit :orderId="orderId" :actPrice="actPrice"></order-profit>
      <div slot="footer" class="dialog-footer">
        <el-button @click="profitopen = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 订单图片上传对话框 -->
    <el-dialog title="订单签章" :visible.sync="imgopen" v-if="imgopen" width="60%"  append-to-body>
      <order-img-upload :orderId="orderId"></order-img-upload>
    </el-dialog>

    <!-- 时间轴对话框 -->
    <el-dialog :title="title" :visible.sync="timeopen" width="1000px"  append-to-body>
      <order-timeline :orderId="orderId" :key="(new Date().getTime())"></order-timeline>
    </el-dialog>

    <!-- 指派驾驶员对话框 -->
    <el-dialog :title="title" :visible.sync="driveropen" width="1400px"  append-to-body>
      <choose-driver :orderId="orderId" :key="(new Date().getTime())" @emitdriverzpDriver="emitdriverzpDriver"></choose-driver>
    </el-dialog>
    <!-- 指派检测站对话框 -->
    <el-dialog :title="title" :visible.sync="stationopen" width="1400px"  append-to-body>
      <choose-station :orderId="orderId" :key="(new Date().getTime())" @emitzpStation="emitzpStation"></choose-station>
    </el-dialog>

    <!-- 免检办理完结对话框 -->
    <el-dialog :title="title" :visible.sync="mjwjopen" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="检测结果" prop="state">
          <el-select v-model="mjwjform.checkResult" placeholder="请选择检测结果" @change="mjwjChange" clearable size="small">
            <el-option
              v-for="dict in auditState"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="mjwjreasonshow"  label="拒绝原因" prop="state">
          <el-select v-if="!mjwjreasonipt" v-model="mjwjform.rejectReason" placeholder="请选择拒绝原因" clearable size="small">
            <el-option
              v-for="dict in reasonOps"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
          <el-input v-if="mjwjreasonipt"
            v-model="mjwjform.rejectReason"
            placeholder="请输入拒绝原因"
            clearable
            size="small"
          />
          <el-button type="text" @click="mjwjreasoniptChg">自定义/选择</el-button>
        </el-form-item>
        <el-form-item label="快递公司" prop="state">
          <el-select v-model="mjwjform.expressCompany" placeholder="请选择快递公司" clearable size="small">
            <el-option
              v-for="dict in compOps"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="gmtTime">
          <el-input
            v-model="mjwjform.expressNumber"
            placeholder="请输入订单号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="年检标签" prop="thumbnailImg">
          <dropzone id="myVueDropzone" :url="url"  :defaultImg="defaultImg" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAudit">确 定</el-button>
        <el-button @click="cancelmjwj">取 消</el-button>
      </div>
    </el-dialog>
    <!--部分扣款对话框-->
    <el-dialog :title="title" :visible.sync="ddkkopen" width="40%">
      <el-row style="padding-left: 12px;font-size: 16px;margin-bottom: 20px;font-weight: 700">
        <el-col :span="12">订单实付: {{ddkkform.orderPrice}}</el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="扣款金额" prop="state">
          <el-select v-model="ddkkform.kkAmount" placeholder="请选择扣款金额" @change="mjwjChange" clearable size="small">
            <el-option
              v-for="dict in orderChargeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="扣款原因" prop="gmtTime">
          <el-input
            v-model="ddkkform.remark"
            placeholder="请输入订单扣款原因"
            clearable
            size="small"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBfRefund">确 定</el-button>
        <el-button @click="ddkkopen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {listOrderOfdzzjZx, exportOrderOfdzzjZx,refundKkOrder,mjslOrder,mjwjOrder,mannelFinish} from "@/api/order/order";

  import orderDetail from './OrderDetail'
  import OrderImgUpload from './OrderImgUpload'
  import orderTimeline from './OrderTimeline'
  import chooseDriver from './chooseDriver'
  import chooseStation from './chooseStation'
  import OrderProfit from './OrderProfit'
  import defaultSettings from '@/settings'
  import Dropzone from '@/components/Dropzone'
  import {mapGetters} from "vuex";

  export default {
    name: "Order",
    props: {
      memberId: {
        type: Number,
        default: undefined
      },
      driverId: {
        type: Number,
        default: undefined
      },
      stationId: {
        type: Number,
        default: undefined
      },
      agentId: {
        type: Number,
        default: undefined
      },
      partnerId: {
        type: Number,
        default: undefined
      },
      appid: {
        type: String,
        default: undefined
      },
      provider: {
        type: Number,
        default: undefined
      },
      stationAgentId: {
        type: Number,
        default: undefined
      },
      stationAgentAll: {
        type: Number,
        default: undefined
      }
    },
    components: {orderDetail,OrderProfit, orderTimeline,chooseDriver,chooseStation,OrderImgUpload,Dropzone},
    data() {
      return {
        ddkkopen: false,
        orderId: null,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 订单表格数据
        orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        timeopen: false,
        imgopen: false,
        mjwjopen: false,
        driveropen: false,
        stationopen:false,
        mjwjreasonshow: false,
        mjwjreasonipt: false,
        // 订单状态字典
        orderStateOptions: [],
        // 是否使用了优惠券字典
        useCouponOptions: [],
        // 订单类型 1六年免检 2 代驾审车  3 自驾审车字典
        orderTypeOptions: [],
        // 检测结果   1合格   0不合格字典
        checkResultOptions: [],
        // 是否已支付   0为支付   1已支付字典
        isPayOptions: [],
        // 支付通道  1微信  2支付宝字典
        payChannelOptions: [],
        // 六年免检拒绝原因
        reasonOps: [],
        // 扣款金额
        orderChargeOptions: [],
        // 日期范围
        dateRange: [],
        finishDateRange: [],
        unlinkPanels:true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          memberId: this.memberId,
          driverId: this.driverId,
          orderState: undefined,
          stationId: this.stationId,
          agentId: this.agentId,
          partnerId:this.partnerId,
          orderNum: undefined,
          carNum: undefined,
          useCoupon: undefined,
          orderType: undefined,
          driverVerfiCode: undefined,
          stationVerfiCode: undefined,
          checkResult: undefined,
          isPay: undefined,
          gmtStartTime: undefined,
          gmtEndTime: undefined,
          finishStartTime: undefined,
          finishEndTime: undefined,
          outTradeNo: undefined,
          payChannel: undefined,
          appid: this.appid,
          provider: this.provider,
          stationAgentId: this.stationAgentId,
          stationAgentAll: this.stationAgentAll
        },
        // 表单参数
        form: {},
        mjwjform: {},
        // 表单校验
        rules: {},
        auditState: [{
          label: '审核通过',
          value: '1'
        }, {
          label: '审核拒绝',
          value: '2'
        }],
        compOps: [{
          label: '顺丰快递',
          value: '顺丰快递'
        }, {
          label: '中通快递',
          value: '中通快递'
        }],
        imgpre: defaultSettings.ossPreview,
        fit: 'fill',
        zindex:5000,
        imgList: [
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        ],
        ddkkform: {
          orderId: undefined,
          kkAmount: undefined,
          remark: ''
        },
        url:process.env.VUE_APP_BASE_API + '/common/upload/oss',
        defaultImg:'',
        profitopen: false,
        actPrice: 0
      };
    },
    created() {
      this.getList();
      this.getDicts("order_state").then(response => {
        this.orderStateOptions = response.data;
      });
      this.getDicts("sys_is_enable").then(response => {
        this.useCouponOptions = response.data;
        this.isPayOptions = response.data;
      });
      this.getDicts("order_type").then(response => {
        this.orderTypeOptions = response.data;
      });
      this.getDicts("check_result").then(response => {
        this.checkResultOptions = response.data;
      });
      this.getDicts("pay_channel").then(response => {
        this.payChannelOptions = response.data;
      });
      this.getDicts("express_company").then(response => {
        this.compOps = response.data;
      });
      this.getDicts("six_year_reject_reason").then(response => {
        this.reasonOps = response.data;
      });
      this.getDicts("order_charge").then(response => {
        this.orderChargeOptions = response.data;
      });
    },
    computed: {
      ...mapGetters(['token']),
      headers() {
        return{
          "Authorization": this.token // 直接从本地获取token就行
        }
      }
    },
    methods: {
      addGmtDateRange(params, dateRange) {
        var search = params;
        search.gmtStartTime = "";
        search.gmtEndTime = "";
        if (null != dateRange && '' != dateRange) {
          search.gmtStartTime = dateRange[0];
          search.gmtEndTime = dateRange[1];
        }
        return search;
      },
      addFinishDateRange(params, dateRange) {
        var search = params;
        search.finishStartTime = "";
        search.finishEndTime = "";
        if (null != dateRange && '' != dateRange) {
          search.finishStartTime = dateRange[0];
          search.finishEndTime = dateRange[1];
        }
        return search;
      },
      /*判断是否能够退款*/
      canSubmitTuikuan(orderDetail){
        let payState = orderDetail.isPay;
        let orderState = orderDetail.orderState;
        // 如果未支付不能退款
        if (0 === payState){
          return false;
        }
        // 已完成不能退款
        if (orderState === 21){
          return false;
        }
        // 已退款不能退款
        if (orderState == 104 || orderState === 109 || orderState === 110){
          return false;
        }
        // 检测站核销过后不能退款
        if (2 === orderDetail.orderType){
          if (orderState >= 12 && orderState <= 21){
            return false;
          }
        }
        return true
      },
      /*判断是否能够执行完成订单*/
      canSubmitFinish(orderDetail){
        let payState = orderDetail.isPay;
        let orderState = orderDetail.orderState;
        // 如果未支付不能执行完成
        if (0 === payState){
          return false;
        }
        // 已完成不能再次执行完成
        if (orderState === 21){
          return false;
        }
        // 已退款不能执行完成
        if (orderState < 1 || orderState > 18 ){
          return false;
        }
        return true
      },
      /** 查询订单列表 */
      getList() {
        this.loading = true;
        this.addGmtDateRange(this.queryParams,this.dateRange);
        this.addFinishDateRange(this.queryParams,this.finishDateRange);
        listOrderOfdzzjZx(this.queryParams).then(response => {
          this.orderList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }, // 订单状态字典翻译
      orderStateFormat(row, column) {
        return this.selectDictLabel(this.orderStateOptions, row.orderState);
      },
      // 是否使用了优惠券字典翻译
      useCouponFormat(row, column) {
        return this.selectDictLabel(this.useCouponOptions, row.useCoupon);
      },

      // 订单类型 1六年免检 2 代驾审车  3 自驾审车字典翻译
      orderTypeFormat(row, column) {
        return this.selectDictLabel(this.orderTypeOptions, row.orderType);
      },
      // 检测结果   1合格   0不合格字典翻译
      checkResultFormat(row, column) {
        return this.selectDictLabel(this.checkResultOptions, row.checkResult);
      },
      // 是否已支付   0为支付   1已支付字典翻译
      isPayFormat(row, column) {
        return this.selectDictLabel(this.isPayOptions, row.isPay);
      },
      payChannelFormat(data) {
        return this.selectDictLabel(this.payChannelOptions, data);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮
      cancelmjwj() {
        this.mjwjopen = false;
        this.reset();
      },
      emitdriverzpDriver() {
        this.driveropen = false;
        this.reset();
      },
      emitzpStation() {
        this.stationopen = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          memberId: undefined,
          driverId: undefined,
          orderState: undefined,
          stationId: undefined,
          remark: undefined,
          orderNum: undefined,
          orderPrice: undefined,
          actPrice: undefined,
          stationFee: undefined,
          driverFee: undefined,
          couponFee: undefined,
          useCoupon: undefined,
          orderType: undefined,
          driverVerfiCode: undefined,
          stationVerfiCode: undefined,
          checkResult: undefined,
          isPay: undefined,
          gmtTime: undefined,
          outTradeNo: undefined,
          payChannel: undefined
        };
        this.resetForm("form");
      },
      resetAuditForm() {
        this.mjwjform = {
          orderId: this.orderId,
          checkResult: undefined,
          expressNumber: undefined,
          expressCompany: undefined,
          rejectReason: undefined,

        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.orderId = row.id;
        this.open = true;
      },

      /** 免检完结按钮操作 */
      handleMjwj(id) {
        this.orderId = id;
        this.resetAuditForm();
        this.mjwjopen = true;
        this.title = "免检完结";
      },

      /** 订单签章按钮操作 */
      handleImgUpload(id) {
        this.orderId = id;
        this.imgopen = true;
      },

      /** 订单获利按钮操作 */
      handleProfit(row) {
        this.profitopen = true;
        this.orderId = row.id;
        this.actPrice = row.actPrice;
      },

      /** 指派驾驶员按钮操作 */
      handleChooseDriver(id) {
        this.orderId = id;
        this.driveropen = true;
        this.title = "指派驾驶员";
      },

      /** 指派检测站按钮操作 */
      handleChooseStation(id) {
        this.orderId = id;
        this.stationopen = true;
        this.title = "指派检测站";
      },

      submitAudit: function () {
        mjwjOrder(this.mjwjform).then(response => {
          if (response.code === 200) {
            this.msgSuccess("修改成功");
            this.mjwjopen = false;
            this.getList();
          } else {
            this.msgError(response.msg);
          }
        });
      },
      /** 免检受理按钮操作 */
      handleMjsl(id) {
        this.$confirm('是否确认受理该订单?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return mjslOrder(id);
        }).then(() => {
          this.getList();
          this.msgSuccess("操作成功");
        }).catch(function () {
        });
      },

      /** 完成按钮操作 */
      handleMannelFinish(id) {
        this.$confirm('是否确认为该订单执行完成操作?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {

          return mannelFinish(id);
        }).then((res) => {
          this.getList();
          this.msgSuccess(res.msg);
        }).catch(function (e) {
          console.log("异常了:" + e)
        });
      },

      /** 扣款退款按钮操作 */
      handleBfRefund(row) {
        this.ddkkopen = true;
        this.ddkkform.orderId = row.id
        this.ddkkform.orderPrice = row.actPrice
        this.ddkkform.kkAmount = undefined
        this.ddkkform.remark = ''
      },
      /** 部分退款提交操作 */
      submitBfRefund() {
        const data = this.ddkkform
        if (!data.remark){
          this.msgError("为防止金额纠纷，请填写扣款原因");
          return
        }
        let confirmMsg = "";
        if (this.ddkkform.kkAmount){
          confirmMsg = "您选择扣款金额为" + this.ddkkform.kkAmount + "元，是否确认金额无误，并执行退款操作？"
        }else{
          confirmMsg = "您未修改退款金额，是否确认金额无误，并执行退款操作？"
        }

        this.$confirm(confirmMsg, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return refundKkOrder(data);
        }).then((res) => {
          this.ddkkopen = false;
          this.getList();
          this.msgSuccess(res.msg);
        }).catch(function () {
        });
      },
      /** 时间轴按钮操作 */
      handleTimeline(id) {
        this.orderId = id;
        this.timeopen = true;
        this.title = "订单操作时间轴";
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有订单数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportOrderOfdzzjZx(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      },
      mjwjChange(val){
        if('2' === val){
          this.mjwjreasonshow =  true;
        }else{
          this.mjwjreasonshow =  false;
        }

      },
      mjwjreasoniptChg(){
        this.mjwjreasonipt = ! this.mjwjreasonipt;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleClickItem(){
        // 获取遮罩层dom
        this.$nextTick(() => {
          console.log("111111111111111111111111")
          let domImageMask = document.querySelector(".el-image-viewer__mask");
          if (!domImageMask) {
            console.log("2222222222222222222222")
            return;
          }
          domImageMask.addEventListener("click", () => {
            // 点击遮罩层时调用关闭按钮的 click 事件
            document.querySelector(".el-image-viewer__close").click();
          });
        })
      },
      dropzoneS(file,xhr) {
        this.mjwjform.sixLable = xhr.imgUrl;
        this.defaultImg = xhr.imgUrl;
        this.$message({ message: 'Upload success', type: 'success' })
      },
      dropzoneR(file) {
        console.log(file.xhr.response.data)
        this.$message({ message: 'Delete success', type: 'success' })
      },
    }
  };
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 6px;
  }
  .el-dropdown {
    font-size: 12px;
  }


  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
    /* overflow-x: auto; */
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar{
    display: none;
  }
</style>
